<template>
  <div class="comprehensive-report">
    <el-card class="report-header" v-loading="loading">
      <template #header>
        <div class="header-content">
          <div class="report-info">
            <h3>综合分析报告</h3>
            <p>{{ reportData.period || '最近一年' }}的穿搭数据分析</p>
          </div>
          <div class="report-actions">
            <el-button @click="exportReport">
              <el-icon><Download /></el-icon>
              导出报告
            </el-button>
            <el-button @click="shareReport">
              <el-icon><Share /></el-icon>
              分享报告
            </el-button>
          </div>
        </div>
      </template>

      <!-- 核心指标 -->
      <div class="key-metrics">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="metric-item">
              <div class="metric-value">{{ reportData.totalOutfits || 0 }}</div>
              <div class="metric-label">总搭配数</div>
              <div class="metric-trend positive">+12%</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="metric-item">
              <div class="metric-value">{{ reportData.totalClothing || 0 }}</div>
              <div class="metric-label">衣服总数</div>
              <div class="metric-trend positive">+8%</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="metric-item">
              <div class="metric-value">{{ reportData.utilizationRate || 0 }}%</div>
              <div class="metric-label">衣柜利用率</div>
              <div class="metric-trend negative">-3%</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="metric-item">
              <div class="metric-value">{{ reportData.averageRating || 0 }}</div>
              <div class="metric-label">平均评分</div>
              <div class="metric-trend positive">+0.2</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 分析摘要 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="summary-card">
          <template #header>
            <span>穿搭风格分析</span>
          </template>
          
          <div class="style-summary">
            <div class="primary-style">
              <h4>主要风格</h4>
              <el-tag size="large" type="primary">
                {{ reportData.primaryStyle || '休闲风格' }}
              </el-tag>
              <p>占比 {{ reportData.primaryStylePercentage || '45' }}%</p>
            </div>
            
            <div class="style-distribution">
              <h5>风格分布</h5>
              <div class="style-bars">
                <div 
                  v-for="style in reportData.styleDistribution" 
                  :key="style.name"
                  class="style-bar"
                >
                  <span class="style-name">{{ style.name }}</span>
                  <div class="bar-container">
                    <div 
                      class="bar-fill" 
                      :style="{ width: style.percentage + '%' }"
                    ></div>
                  </div>
                  <span class="style-percentage">{{ style.percentage }}%</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="summary-card">
          <template #header>
            <span>颜色偏好分析</span>
          </template>
          
          <div class="color-summary">
            <div class="favorite-colors">
              <h4>最爱颜色</h4>
              <div class="color-palette">
                <div 
                  v-for="color in reportData.favoriteColors" 
                  :key="color.name"
                  class="color-swatch"
                  :style="{ backgroundColor: color.hex }"
                  :title="color.name"
                ></div>
              </div>
            </div>
            
            <div class="color-stats">
              <div class="stat-row">
                <span class="stat-label">总颜色数:</span>
                <span class="stat-value">{{ reportData.totalColors || 0 }}</span>
              </div>
              <div class="stat-row">
                <span class="stat-label">最常用:</span>
                <span class="stat-value">{{ reportData.mostUsedColor || '黑色' }}</span>
              </div>
              <div class="stat-row">
                <span class="stat-label">颜色多样性:</span>
                <span class="stat-value">{{ reportData.colorDiversity || '中等' }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 使用习惯分析 -->
    <el-card class="usage-analysis">
      <template #header>
        <span>使用习惯分析</span>
      </template>

      <el-row :gutter="20">
        <el-col :span="8">
          <div class="usage-metric">
            <h4>高频单品</h4>
            <div class="top-items">
              <div 
                v-for="item in reportData.topUsedItems" 
                :key="item.id"
                class="top-item"
              >
                <img 
                  :src="item.image || '/placeholder-clothing.png'" 
                  :alt="item.name"
                  class="item-image"
                />
                <div class="item-info">
                  <span class="item-name">{{ item.name }}</span>
                  <span class="item-count">{{ item.wearCount }} 次</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="usage-metric">
            <h4>闲置单品</h4>
            <div class="unused-stats">
              <div class="unused-count">
                <span class="count">{{ reportData.unusedCount || 0 }}</span>
                <span class="label">件未穿</span>
              </div>
              <div class="unused-percentage">
                占总数 {{ reportData.unusedPercentage || 0 }}%
              </div>
              <el-button size="small" type="primary" @click="viewUnusedItems">
                查看详情
              </el-button>
            </div>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="usage-metric">
            <h4>购买建议</h4>
            <div class="buying-suggestions">
              <div 
                v-for="suggestion in reportData.buyingSuggestions" 
                :key="suggestion.category"
                class="suggestion-item"
              >
                <el-tag 
                  :type="suggestion.priority === 'high' ? 'danger' : 'warning'"
                  size="small"
                >
                  {{ suggestion.category }}
                </el-tag>
                <span class="suggestion-text">{{ suggestion.reason }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 季节性分析 -->
    <el-card class="seasonal-summary">
      <template #header>
        <span>季节性穿搭特征</span>
      </template>

      <div class="seasons-overview">
        <div 
          v-for="(season, key) in reportData.seasonalData" 
          :key="key"
          class="season-summary"
        >
          <div class="season-header">
            <h4>{{ getSeasonName(key) }}</h4>
            <span class="season-count">{{ season.totalWears }} 次</span>
          </div>
          
          <div class="season-features">
            <div class="feature">
              <span class="feature-label">主要颜色:</span>
              <span class="feature-value">{{ season.topColor }}</span>
            </div>
            <div class="feature">
              <span class="feature-label">主要风格:</span>
              <span class="feature-value">{{ season.topStyle }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 改进建议 -->
    <el-card class="improvement-suggestions">
      <template #header>
        <span>改进建议</span>
      </template>

      <div class="suggestions-list">
        <div 
          v-for="suggestion in reportData.improvements" 
          :key="suggestion.title"
          class="suggestion-card"
          :class="suggestion.type"
        >
          <div class="suggestion-icon">
            <el-icon v-if="suggestion.type === 'urgent'"><Warning /></el-icon>
            <el-icon v-else-if="suggestion.type === 'important'"><InfoFilled /></el-icon>
            <el-icon v-else><Lightbulb /></el-icon>
          </div>
          
          <div class="suggestion-content">
            <h4>{{ suggestion.title }}</h4>
            <p>{{ suggestion.description }}</p>
            <div class="suggestion-actions">
              <el-button size="small" @click="applySuggestion(suggestion)">
                应用建议
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { analysisAPI } from '@/api'

const loading = ref(false)
const reportData = reactive({
  period: '最近一年',
  totalOutfits: 0,
  totalClothing: 0,
  utilizationRate: 0,
  averageRating: 0,
  primaryStyle: '',
  primaryStylePercentage: 0,
  styleDistribution: [],
  favoriteColors: [],
  totalColors: 0,
  mostUsedColor: '',
  colorDiversity: '',
  topUsedItems: [],
  unusedCount: 0,
  unusedPercentage: 0,
  buyingSuggestions: [],
  seasonalData: {},
  improvements: []
})

const loadData = async () => {
  try {
    loading.value = true
    const response = await analysisAPI.getComprehensiveReport()
    
    if (response.code === 200) {
      Object.assign(reportData, response.data)
    } else {
      throw new Error(response.message || '获取综合报告失败')
    }
  } catch (error) {
    console.error('获取综合报告失败:', error)
    ElMessage.error('获取数据失败')
    
    // 模拟数据
    Object.assign(reportData, {
      totalOutfits: 48,
      totalClothing: 85,
      utilizationRate: 72,
      averageRating: 4.2,
      primaryStyle: '休闲风格',
      primaryStylePercentage: 45,
      styleDistribution: [
        { name: '休闲', percentage: 45 },
        { name: '商务', percentage: 30 },
        { name: '正式', percentage: 15 },
        { name: '运动', percentage: 10 }
      ],
      favoriteColors: [
        { name: '黑色', hex: '#000000' },
        { name: '白色', hex: '#FFFFFF' },
        { name: '蓝色', hex: '#0066CC' },
        { name: '灰色', hex: '#808080' }
      ],
      totalColors: 12,
      mostUsedColor: '黑色',
      colorDiversity: '中等',
      topUsedItems: [
        { id: 1, name: '白色衬衫', wearCount: 15, image: '/placeholder-clothing.png' },
        { id: 2, name: '牛仔裤', wearCount: 12, image: '/placeholder-clothing.png' },
        { id: 3, name: '黑色外套', wearCount: 10, image: '/placeholder-clothing.png' }
      ],
      unusedCount: 18,
      unusedPercentage: 21,
      buyingSuggestions: [
        { category: '下装', priority: 'high', reason: '数量不足' },
        { category: '配饰', priority: 'medium', reason: '缺少搭配' }
      ],
      seasonalData: {
        spring: { totalWears: 12, topColor: '粉色', topStyle: '清新' },
        summer: { totalWears: 18, topColor: '白色', topStyle: '清爽' },
        autumn: { totalWears: 10, topColor: '棕色', topStyle: '复古' },
        winter: { totalWears: 8, topColor: '黑色', topStyle: '保暖' }
      },
      improvements: [
        {
          type: 'urgent',
          title: '提高衣柜利用率',
          description: '您有21%的衣服从未穿过，建议整理衣柜或尝试新的搭配组合'
        },
        {
          type: 'important',
          title: '增加风格多样性',
          description: '尝试更多不同的风格，让穿搭更有趣味性'
        },
        {
          type: 'suggestion',
          title: '完善基础单品',
          description: '建议添加一些基础百搭单品，提升搭配灵活性'
        }
      ]
    })
  } finally {
    loading.value = false
  }
}

const getSeasonName = (season) => {
  const names = {
    spring: '春季',
    summer: '夏季',
    autumn: '秋季',
    winter: '冬季'
  }
  return names[season] || season
}

const exportReport = () => {
  ElMessage.success('报告导出功能开发中')
}

const shareReport = () => {
  ElMessage.success('报告分享功能开发中')
}

const viewUnusedItems = () => {
  ElMessage.info('跳转到闲置单品页面')
}

const applySuggestion = (suggestion) => {
  ElMessage.success(`已应用建议: ${suggestion.title}`)
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.comprehensive-report {
  space-y: 20px;
}

.report-header {
  margin-bottom: 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.report-info h3 {
  margin: 0 0 4px 0;
  color: #333;
}

.report-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.report-actions {
  display: flex;
  gap: 12px;
}

.key-metrics {
  margin-top: 20px;
}

.metric-item {
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  background: #f8f9fa;
}

.metric-value {
  font-size: 32px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 8px;
}

.metric-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.metric-trend {
  font-size: 12px;
  font-weight: 500;
}

.metric-trend.positive {
  color: #67C23A;
}

.metric-trend.negative {
  color: #F56C6C;
}

.summary-card,
.usage-analysis,
.seasonal-summary,
.improvement-suggestions {
  margin-bottom: 20px;
}

.style-summary,
.color-summary {
  space-y: 16px;
}

.primary-style {
  text-align: center;
  margin-bottom: 20px;
}

.primary-style h4 {
  margin: 0 0 8px 0;
  color: #333;
}

.primary-style p {
  margin: 8px 0 0 0;
  color: #666;
  font-size: 14px;
}

.style-distribution h5 {
  margin: 0 0 12px 0;
  color: #666;
  font-size: 14px;
}

.style-bars {
  space-y: 8px;
}

.style-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.style-name {
  width: 60px;
  font-size: 12px;
  color: #666;
}

.bar-container {
  flex: 1;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: #409EFF;
  transition: width 0.3s;
}

.style-percentage {
  width: 40px;
  text-align: right;
  font-size: 12px;
  color: #666;
}

.favorite-colors h4 {
  margin: 0 0 12px 0;
  color: #333;
}

.color-palette {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #eee;
}

.color-stats {
  space-y: 8px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 8px;
}

.stat-label {
  color: #666;
}

.stat-value {
  color: #333;
  font-weight: 500;
}

.usage-metric h4 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 16px;
}

.top-items {
  space-y: 12px;
}

.top-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.item-image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

.item-info {
  display: flex;
  flex-direction: column;
}

.item-name {
  font-size: 14px;
  color: #333;
}

.item-count {
  font-size: 12px;
  color: #666;
}

.unused-stats {
  text-align: center;
}

.unused-count {
  margin-bottom: 8px;
}

.unused-count .count {
  font-size: 24px;
  font-weight: bold;
  color: #F56C6C;
}

.unused-count .label {
  font-size: 14px;
  color: #666;
  margin-left: 4px;
}

.unused-percentage {
  font-size: 12px;
  color: #999;
  margin-bottom: 12px;
}

.buying-suggestions {
  space-y: 8px;
}

.suggestion-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.suggestion-text {
  font-size: 12px;
  color: #666;
}

.seasons-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.season-summary {
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.season-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.season-header h4 {
  margin: 0;
  color: #333;
}

.season-count {
  font-size: 12px;
  color: #666;
}

.season-features {
  space-y: 8px;
}

.feature {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 8px;
}

.feature-label {
  color: #666;
}

.feature-value {
  color: #333;
  font-weight: 500;
}

.suggestions-list {
  space-y: 16px;
}

.suggestion-card {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 16px;
}

.suggestion-card.urgent {
  border-left: 4px solid #F56C6C;
  background: #fef0f0;
}

.suggestion-card.important {
  border-left: 4px solid #E6A23C;
  background: #fdf6ec;
}

.suggestion-card.suggestion {
  border-left: 4px solid #409EFF;
  background: #ecf5ff;
}

.suggestion-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.suggestion-card.urgent .suggestion-icon {
  background: #F56C6C;
  color: white;
}

.suggestion-card.important .suggestion-icon {
  background: #E6A23C;
  color: white;
}

.suggestion-card.suggestion .suggestion-icon {
  background: #409EFF;
  color: white;
}

.suggestion-content h4 {
  margin: 0 0 8px 0;
  color: #333;
}

.suggestion-content p {
  margin: 0 0 12px 0;
  color: #666;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .seasons-overview {
    grid-template-columns: 1fr;
  }
  
  .suggestion-card {
    flex-direction: column;
    text-align: center;
  }
  
  .suggestion-icon {
    margin: 0 auto 12px auto;
  }
}
</style>
